<template>
  <view class="content">
    <wrap class="logo-warp">
      <image class="logo" src="/static/logo.png"></image>
    </wrap>
    <wrap class="phone-warp">
      <input
        class="phone"
        type="number"
        placeholder="请输入手机号"
        maxlength="11"
        v-model="phoneNum"
      />
    </wrap>
    <wrap>
      <div
        class="login-btn"
        :class="isDisable ? '' : 'disabled'"
        @click="getCode"
      >
        获取验证码
      </div>
    </wrap>
    <van-toast id="van-toast" />
    <van-notify id="van-notify" />
  </view>
</template>

<script>
import { user_getCode } from "@/api/user.js";
export default {
  data() {
    return {
      isDisable: false,
      phoneNum: "13641009512",
      isTest: false,
    };
  },
  onLoad() {},
  watch: {
    phoneNum: {
      handler(newVal) {
        if (newVal.length >= 11) {
          this.isDisable = true;
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 获取验证码
    getCode() {
      // 如果长度不够，或者正则不对
      if (!this.isDisable) return;
      if (!this.formSubmit()) return;
      console.log("验证成功");
      this.$toast({
        type: "success",
        message: "已发送",
        timeout: 1000,
        onClose: () => {
          // 获取验证码
          user_getCode({
            phoneNum: this.phoneNum,
          }).then((res) => {
            console.log(res);
          });

          uni.navigateTo({
            url: `./../getCode/getCode?phoneNum=${this.phoneNum}`,
          });
        },
      });
    },
    formSubmit() {
      if (this.phoneNum.length !== 11) {
        this.$toast("请输入11位手机号");
        return false;
      }
      if (!this.$validator.isMobilePhone(this.phoneNum, "zh-CN")) {
        this.$toast("手机号格式有误");
        return false;
      }
      return true;
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
